<script setup>
import { ref , reactive,computed} from 'vue'
    let  loading = ref(false)
    let  codeFlag = ref(false)
    let  sendLoading = ref(false)
    let  timer = ref(null)
    let  loginForm = ref(null)
    let  count = ref(60)
    let  icon = ref('')
    let  form = reactive({})
    let  options = reactive([])
    let  radioOptions = reactive([])

    const disabled = computed(()=> !form.registeredType || !form.phone || !form.code)
    const rules = computed(()=>{
    return {
        registeredType: {
          required: true,
          message: '请选择注册类型',
          trigger: ['change', 'blur']
        },
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur']
          },
          { pattern: /^[0-9]*$/, message: '手机号格式错误' }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur']
          }
        ]
      }})
    const sendPhoneCode = ()=> {
      loginForm.value.validateField('phone', async (phoneError) => {
        if (!phoneError) {
          sendLoading.value = true
          try {
            await $api.user.info.sendPhone({
              phone: form.phone,
              sign: md5(form.phone + '-' + moment().format('YYYY-MM-DD-HH') + '-' + 'skywin')
            })
            sendLoading.value = false
            codeFlag.value = true
            count.value = 60
            timedCount()
          } catch {
            sendLoading.value = false
            codeFlag.value = false
          }
        }
      })
    }
    // 倒计时
    const timedCount = ()  =>{
      timer.value = setInterval(() => {
        count.value--
        if (this.count === 0) {
          codeFlag.value = false
          clearInterval(timer.value)
        }
      }, 1000)
    }
    const submitForm = () => {
      form.registeredMethod = 1
      defineEmits('submit', form)
    }
</script>

<template>
      <div>
    <el-form ref="loginForm" label-position="left"  v-loading="loading" :rules="rules" :model="form" class="ruleForm" size="small">
      <el-form-item :label="$t('注册类型')+ ':'" prop="registeredType">
        <el-radio-group v-model="form.registeredType">
          <el-radio label="0">{{ $t('个人注册') }}</el-radio>
          <el-radio label="1">{{ $t('企业注册') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="phone" class="item">
        <el-input
          v-model="form.phone"
          size="small"
          clearable
          :placeholder="$t('请输入手机号')"
          prefix-icon="Iphone"
          @keyup.enter.native="submitForm"
        />
      </el-form-item>
      <el-form-item prop="code" class="item">
        <el-row style="    width: 100%;">
          <el-col :span="16">
            <el-input
              v-model="form.code"
              class="checkInp"
              size="small"
              clearable
              type="text"
              :placeholder="$t('请输入短信验证码')"
              prefix-icon="FolderChecked"
              @keyup.enter.native="submitForm"
            />
          </el-col>
          <el-col :span="8" style="text-align: right;">
            <el-button  type="primary" plain :disabled="codeFlag" :loading="sendLoading" @click="sendPhoneCode">{{ codeFlag ? `${count}${$t('秒后重新发送')}` : $t('发送验证码') }}</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- <el-form-item prop="proxyCusCode" class="item">
        <el-input
          v-model="form.proxyCusCode"
          size="small"
          clearable
          :placeholder="$t('请输入代理人编码')"
          prefix-icon="el-icon-user"
          @keyup.enter.native="submitForm"
        />
      </el-form-item>
      <el-form-item prop="businessIntentions" class="item">
        <el-select v-model="form.businessIntentions" multiple :placeholder="$t('业务意向(可多选)')">
          <span slot="prefix" class="pre-select"><i class="el-icon-suitcase-1" /></span>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.subName"
            :value="item.subCode"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item class="item">
        <el-button type="primary" size="medium" :loading="loading" :disabled="disabled" class="sub_btn" @click="submitForm">{{ $t('下一步') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
:deep(){
  .el-select__tags {
    left: 30px;
  }
  .el-input__inner {
    border-radius: 0;
  }
  .el-input__icon {
    color: #001960;
    font-size: 16px;
    font-weight: bold;
  }
  .el-form-item--small .el-form-item__error {
    margin-left: 40px;
  }
  .el-button--small{
    --el-button-size:35px;
    padding: 9px 15px !important;
    line-height: var(--el-button-size);
  }
}
  .ruleForm{                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
    margin-top: 20px;
    .item{
      .sub_btn{
          width: 100%;
      }
    }
    .forget-btn {
      text-align: right;
    }
    .reg-btn {
      margin-top: 10px;
      text-align: center;
    }
    .pre-select {
      color: #001960;
      font-size: 18px;
      display: block;
      width: 26px;
    }
  }
  .checkImg{
    width: 100px;
    height: 33px;
    margin-left: 15px;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
  }
</style>
